Documentation
We create Beautiful designs, powerful features to build anything you want with Our WordPress Theme.
Theme Requirements
To run WordPress Theme we recommend using a host that supports:
PHP configuration
We recommend you make sure that your server PHP configuration limits are as follows:
Theme Folder Structure
Let's talk about what's inside the downloaded package.Once you purchased our theme you've to download All Files & Documentation zip file. Following folder structure is based on that zip file, in that zip file only you'll get all of our theme files including demo content & offline documentation folder.
Step by step download folder instructions
- Demo Data - this folder contains, demo data files. content.xmltheme-options.txtwidget.wie
- Documentation - it contains offline documentation files, just simply what you're seeing now.
- Licensing - it contains envato and WordPress standard licensing information files
- Plugins - it contains plugin canun theme core plugin file and other premium plugins files
- canun.zip - this is the right file to install in your WordPress admin.
- canun-child.zip - this is just a child theme, if you want to edit any code files within theme, use this child theme. Don't edit any codes parent theme.
Theme Installation
Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find the canun.zip file which is the WordPress theme.
Step by step instructions for install WordPress Theme:
- Login to WordPress admin panel
- Go to Appearance Themes Add New
- Then click on the Upload New
- Upload theme zip file
- Click on the Activate button
Extract Theme Bundle and Install Theme
Follow The Simple Image Steps
Plugin Installation
After completion of theme installation process at the top of the WordPress admin panel you should get a notice with the list of required and recommended plugins.
Please select your needed plugins to Install and Activate.
| 1) |
Canun Core |
It's our core plugin, it've shortcodes and custom post types. |
| 2) |
Elementor Page Builder |
The best WordPress Page Builder plugin. |
| 3) |
Codestar Framework |
Highly effective Option Framework plugin. |
| 4) |
WooCommerce |
WooCommerce is the world’s most popular eCommerce solution. |
| 5) |
Contact Form 7 |
Contact form plugin to have email form. |
| 6) |
One Click Demo Import |
One Click Demo Import Plugin. |
Follow The Simple Image Steps
Child Theme Installation
A WordPress child theme allows you to apply custom code changes to your site and dont lose it with update of main theme. After theme installation, you can install child-theme. Please find it in the downloaded folder. You can same way install child theme as like parent theme..
Follow The Simple Image Steps
Demo Content Import
In this step you'll get all live demo contents to your own site, that you're experienced with our live demo site. There is no more trick and no more surprise. You'll get all up and running website within few minutes of installation process.
Step by step instructions for Demo Content Import:
- Login to WordPress admin panel
- Go to Appearance Install Demo
-
Then click on the Import Demo Data
Follow The Simple Image Steps
After Demo Import
Navigate to Elementor > Settings after import the demo content. Check the “Disable Default Colors” and “Disable Default Fonts” check-boxes.And select post type servie, project, team so that custom post can be edit using elementor.
Follow The Simple Image Steps
An alternative method to import the demo content.
However, you will get all demo content data with the theme package. You will find the demos in theme bundle ‘demo-data’ this path. If you failed to import the demo content by one click then you have to follow the below steps to import the demo content manually.
- Navigate to Tools > Import then install the WordPress plugin and click on the ‘Run Importer’. Upload here the ‘contents.xml’ file.
- Install the ‘Widget Importer & Exporter‘ plugin to import the demo widgets. Then navigate to Tools > Widget Importer & Exporter and upload here the ‘widgets.wie’ file.
-
Now you have to import the Theme Options Settings of the desired demo. Navigate to ‘Appearance > Theme Options > Backup’. Then copy-paste the theme-options.txt file’s backup string here and click on the Import a Backup button.
Theme Options settings
What ever options you miss from above Page Options, pretty much everything you'll find here. These all options get affect in globally. Like: Logo, Layout Options, Header, Footer & Etc. like below screenshot. It means, we've explained that section as a screenshot format. So, you'll get clear understanding of how it's working and that section tricks.
Follow The Simple Image Steps
Page Options settings
You have the possibility to select different Header Templates for each page at the Page Settings.Also you can change banner image for specific page and can hide header and footer. Topbar shortcode etc.
Follow The Simple Image Steps
Customizer settings
The Customizer will provide you an in-depth guide on how to Change Color. All color options are available in our theme customizer. The reason of we used customizer options for color section is because, you can choose each part of color from there and see the changes instantly using customizer. Highly customizable colors are in Appearance > Customizer
Follow The Simple Image Steps
Contact Form 7
We've used in our live demo site contact forms are from Contact Form 7 plugin. You can just install Contact Form 7 as normal plugin. And start using it in that native way. No more surprise or tricks.
Follow The Simple Image Steps
Here is the About Contact Form 7 code
<div>[text* text-769 class:form-control placeholder "Your Name"]</div>
<div>[email* email-926 class:form-control placeholder "Your Email"]</div>
<div>[select* menu-691 class:form-control "Subject" "Family Law" "Criminal Law" "Business Law" "Education Law" "Business Law"]</div>
<div class="fullwidth">[textarea* textarea-316 class:form-control placeholder "Message"]</div>
<div class="submit-area">[submit class:theme-btn "Make An Appointment"]</div>
Here is the Contact page Form 7 code
<div class="row">
<div class="col-lg-6">[text* text-423 class:form-control placeholder "Your Name"]</div>
<div class="col-lg-6">[email* email-419 class:form-control placeholder "Your Email"]</div>
<div class="col-lg-6">[tel* tel-570 class:form-control placeholder "Your Phone"]</div>
<div class="col-lg-6">[select* menu-490 class:form-control "Subject" "Family Law" "Business Law" "Education Law" "Criminal Law"]</div>
<div class="fullwidth col-lg-12 ">[textarea* textarea-512 class:form-control placeholder "Message"]</div>
</div>
<div class="submit-area">[submit class:theme-btn "Make An Appointment"]</div>
Contact Form 7 Official Documentation
The detailed documentation for Contact Form 7 is available in online(link found below). For any details or interactions about the Plugin features, please refer to that documentation. Due to our theme strictly followed Contact Form 7 native way, there is no point to mention in our theme documentation about Contact Form 7 plugin. So, please follow their official documentation.
Official Documentation
Footer Shortcode
The Footer logo and desctription comes using shortcode builder. You can add and insert shortcode from Appearance > Widget > Add Shortcode
Follow The Simple Image Steps
Elementor Custom Widget
In our theme we've used Elementor Page Builder custom widget. User friendly features to the next level. We've used some custom interaction methods to extend the usage of our shortcodes effectively without boring. All of our custom shortcodes listed under by Canun Theme : By wpoceans filter like in below screenshot.
Follow The Simple Image Steps
